<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Jitsi Meet 视频通话</title>
    <style>
        body {
            background: #000;
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        
        .container {
            background: transparent;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            background: rgba(0, 0, 0, 0.7);
            padding: 20px;
            color: white;
            text-align: center;
        }
        
        h1 {
            color: white;
            margin: 0;
            font-size: 28px;
            font-weight: 600;
        }
        
        #jitsi-container {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        
        .controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 10;
            background: rgba(0, 0, 0, 0.8);
            padding: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 20px;
        }
        
        .room-input {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 20px;
        }
        
        input[type="text"] {
            padding: 12px 20px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            width: 300px;
            background: rgba(255, 255, 255, 0.9);
        }
        
        button {
            background: #34C759;
            color: white;
            border: none;
            padding: 18px 36px;
            border-radius: 50px;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
            min-width: 160px;
        }
        
        button:hover {
            background: #30B050;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(52, 199, 89, 0.4);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        button.stop {
            background: #FF3B30;
            box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3);
        }
        
        button.stop:hover {
            background: #E0342A;
            box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4);
        }
        
        .status {
            margin-top: 15px;
            padding: 15px;
            border-radius: 8px;
            font-weight: 500;
            font-size: 18px;
            display: none;
            color: white;
            background: rgba(255, 255, 255, 0.1);
        }
        
        .status.success {
            background: rgba(52, 199, 89, 0.2);
            border: 1px solid #34C759;
        }
        
        .status.error {
            background: rgba(255, 59, 48, 0.2);
            border: 1px solid #FF3B30;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📹 Jitsi Meet 视频通话</h1>
        </div>
        
        <div id="jitsi-container"></div>
        
        <div class="controls">
            <div class="room-input">
                <input type="text" id="roomName" placeholder="输入会议室名称" value="test-room-123">
                <button id="joinBtn" onclick="joinMeeting()">🚀 加入会议</button>
            </div>
            
            <button id="leaveBtn" onclick="leaveMeeting()" style="display: none;">📞 离开会议</button>
            <div id="status" class="status"></div>
        </div>
    </div>
    
    <!-- 引入 Jitsi Meet API -->
    <script src='https://meet.jit.si/external_api.js'></script>
    
<script>
        let api = null;
        let isInMeeting = false;
        
        function joinMeeting() {
            const roomName = document.getElementById('roomName').value.trim();
            const status = document.getElementById('status');
            const joinBtn = document.getElementById('joinBtn');
            const leaveBtn = document.getElementById('leaveBtn');
            
            if (!roomName) {
                showStatus('请输入会议室名称', 'error');
                return;
            }
            
            if (isInMeeting) {
                showStatus('您已经在会议中', 'error');
                return;
            }
            
            showStatus('正在加入会议...', '');
            
            const domain = 'meet.jit.si';
            const options = {
                roomName: roomName,
                width: '100%',
                height: '100%',
                parentNode: document.querySelector('#jitsi-container'),
                configOverwrite: {
                    startWithAudioMuted: false,
                    startWithVideoMuted: false,
                    enableWelcomePage: false,
                    prejoinPageEnabled: false
                },
                interfaceConfigOverwrite: {
                    TOOLBAR_BUTTONS: [
                        'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
                        'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
                        'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
                        'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
                        'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone', 'security'
                    ],
                    SHOW_JITSI_WATERMARK: false,
                    SHOW_WATERMARK_FOR_GUESTS: false,
                    SHOW_POWERED_BY: false
                },
                userInfo: {
                    displayName: '用户' + Math.floor(Math.random() * 1000),
                    email: 'user@example.com'
                },
                onload: function() {
                    console.log('Jitsi Meet API 加载完成');
                    showStatus('✅ 会议已连接', 'success');
                    isInMeeting = true;
                    joinBtn.style.display = 'none';
                    leaveBtn.style.display = 'block';
                }
            };
            
            try {
                api = new JitsiMeetExternalAPI(domain, options);
                
                // 监听会议事件
                api.addListener('videoConferenceJoined', function() {
                    console.log('用户加入会议');
                    showStatus('✅ 已成功加入会议', 'success');
                });
                
                api.addListener('videoConferenceLeft', function() {
                    console.log('用户离开会议');
                    showStatus('📞 已离开会议', '');
                    isInMeeting = false;
                    joinBtn.style.display = 'block';
                    leaveBtn.style.display = 'none';
                });
                
                api.addListener('participantJoined', function(participant) {
                    console.log('参与者加入:', participant);
                    showStatus('👥 有参与者加入会议', 'success');
                });
                
                api.addListener('participantLeft', function(participant) {
                    console.log('参与者离开:', participant);
                    showStatus('👥 有参与者离开会议', '');
                });
                
            } catch (error) {
                console.error('创建会议失败:', error);
                showStatus('❌ 创建会议失败: ' + error.message, 'error');
            }
        }
        
        function leaveMeeting() {
            if (api && isInMeeting) {
                try {
                    api.dispose();
                    api = null;
                    isInMeeting = false;
                    
                    document.getElementById('joinBtn').style.display = 'block';
                    document.getElementById('leaveBtn').style.display = 'none';
                    
                    showStatus('📞 已离开会议', '');
                } catch (error) {
                    console.error('离开会议失败:', error);
                    showStatus('❌ 离开会议失败', 'error');
                }
            }
        }
        
        function showStatus(message, type) {
            const status = document.getElementById('status');
            status.textContent = message;
            status.className = 'status ' + type;
            status.style.display = 'block';
            
            // 3秒后自动隐藏成功消息
            if (type === 'success') {
                setTimeout(() => {
                    status.style.display = 'none';
                }, 3000);
            }
        }
        
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Jitsi Meet 视频通话页面已加载');
            showStatus('🎯 请输入会议室名称并点击加入会议', '');
        });
</script>
</body>
</html>